前言

延續前兩天的主題，今天將介紹第三篇語言的應用，目前在 Web 開發中大殺四方的王者： JavaScript。

基礎應用

IntelliSense

請容我再重複講一次昨天 Day 16: 使用 VS Code 來開發 CSS、Sass、LESS 提過：

使用 VS Code 開發任何語言，一定會有這個功能。
而 JavaScript跟 CSS、 HTML 一樣，支援是內建的，不用下載語言包。

Snippets

請參考這篇：Day 08: 手工打造專屬於自己的 Snippets（一）。

hover

快速提供資訊游標所指的物件、變數、函式的內容。

預覽函式要帶入的參數內容

一旦幫函式的尾巴補上(，或是在參數內輸入 ,，就會觸發預覽。

排版，Formatting

內建排版功能，只要按下快捷鍵（Windows: Ctrl + K, Ctrl + F；macOS: ⌘K, ⌘F）就能使用。

假如要修改的話，有兩個方法：

進入設定修改

步驟如下：

• 滑鼠移到左下方，按下齒輪。
• 點擊設定。
• 開啟設定分頁後，在上方搜尋欄位，輸入 javascript.format.*。
• 
• 搜尋結果會顯示相關設定，接下來就自己研究吧。

使用 Extension

推薦的插件跟 Day 15: 使用 VS Code 來開發 HTML 內提到的一樣：

• Prettier - Code formatter
• Beautify

快捷鍵的應用

當然是 Peek Definition & Rename 囉
詳情請前往：Day 05: 操作上總是有些小秘訣的。

Debugging

詳情請前往：

• Day 11: 總是被忽視的功能：debugging（一）

• Day 12: 總是被忽視的功能：debugging（二）

提醒，前端需要 Extension: Debugger for Chrome 輔助。

延伸應用

重構，Refactoring

步驟如下：

• 選取一段完整的程式碼。
• 點擊旁邊的燈泡。
  • 
• 有三個可以選擇，筆者選擇 擷取自 global 範圍中的 function。
  • 
• 輸入新名稱。
  • 
  • 
• 按下 enter 後完成重構。
  • 

整理匯入檔案，Organize Imports

步驟如下：

• 開啟具有 import 的檔案。
  • 
• 在程式碼空白處按下右鍵，選擇 來源動作。
  • 
• 選擇 組織匯入。
  • 
• 完成整理。
  • 

這功能我在 Eclipse 上看過

Linters

VS Code 沒有內建 linter，因此需要 extension 的幫助，以下列出目前前四名下載數：

• ESLint
• jshint
• Flow Language Support
• StandardJS - JavaScript Standard Style

結論

本篇著重在介紹 VS Code 如何幫助工程師可以更快速、輕鬆地開發 JS 程式碼。
至於進階的應用，留待之後介紹。